<template>
  <div class="search_container">
    <div id="search">
      <div class="search_input">
        <img src="/static/images/icon-search.png" alt="search">
        <form @submit.prevent="search(key)">
          <input type="text" placeholder="搜索 歌曲/专辑/歌手"
            @focus="focus"
            v-model="key">
        </form>
      </div>
      <div 
        :class="['search_cancel', searchShow ? 'search_cancel_show': '']"
        @click="searchCancel"
        @touchend.prevent="searchCancel">取消</div>
    </div>
    
    <div class="hotkey" v-if="searchRes==null && searchShow">
      <div class="search_history">
        <div class="item" @click="search(item)"
          v-for="(item, i) in searchHistory" :key="i">{{ item }}</div>
      </div>
      <ul>
        <li v-for="(item, index) in hotkeys" :key="index"
          @click="search(item.k)">
          <span class="hotkey_index">{{ index+1 }}</span>
          <span class="hotkey_k">{{ item.k }}</span>
          <span class="hotkey_n">{{ item.n | listenCount }}</span>
        </li>
      </ul>
    </div>

    <div class="result" v-if="searchRes!=null && searchShow">
      <div class="group">
        <div class="header">
          <img src="/static/images/icon-music.png" alt="musicIcon">
          <p class="text">单曲</p>
        </div>
        <div class="song_item"
          v-for="(item, index) in searchRes.song.itemlist" :key="item.id">
          <div class="info" @click="play(index)">
            <span class="name">{{ item.name }}</span>
            <span class="author">-{{ item.singer }}</span>
          </div>
          <div class="action_button">
            <img src="/static/images/icon-...black.png">
          </div>
        </div>
      </div>
      <div class="group">
        <div class="header">
          <img src="/static/images/icon-album.png" alt="albumIcon">
          <p class="text">专辑</p>
        </div>
        <div class="album_item"
          v-for="item in searchRes.album.itemlist" :key="item.id"
          @click="showAlbum(item.mid)">
          <img v-lazy="item.pic" class="album_img">
          <div class="info">
            <span class="name">{{ item.name }}</span>
            <span class="author">{{ item.singer }}</span>
          </div>
        </div>
      </div>
      <div class="group">
        <div class="header">
          <img src="/static/images/icon-singer.png" alt="singerIcon">
          <p class="text">歌手</p>
        </div>
        <div class="singer_item"
          v-for="item in searchRes.singer.itemlist" :key="item.id"
          @click="showSinger(item.mid)">
          <img v-lazy="item.pic"  class="singer_img">
          <p class="singer_name">{{ item.name }}</p>
        </div>
      </div>
      <div class="group">
        <div class="header">
          <img src="/static/images/icon-mv.png" alt="mvIcon">
          <p class="text">MV</p>
        </div>
        <div class="mv_item"
          v-for="item in searchRes.mv.itemlist" :key="item.id"
          @click="openmv(item.vid)">
          <div class="info">
            <span class="name">{{ item.name }}</span>
            <span class="author">{{ item.singer }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
  name: 'search',
  data() {
    return {
      key: '',
      searchShow: false,
      hotkeys: null,
      searchRes: null,
      searchHistory: []
    }
  },
  methods: {
    focus() {
      this.searchShow = true
      this.$emit('searchShow')
    },
    searchCancel() {
      this.searchShow = false
      this.key = ''
      this.searchRes = null
      this.$emit('searchHide')
    },
    search(key) {
      this.key = key
      if(this.key.trim() == ''){
        Toast('输入内容不能为空')
        return
      }

      this.$store.dispatch('search', key).then(res => {
        this.searchRes = res.data.data
        let index = this.searchHistory.indexOf(key)
        if(index !== -1) {
          this.searchHistory.splice(index, 1)
        }
        this.searchHistory.unshift(key)
        this.searchHistory = this.searchHistory.slice(0, 10)
        localStorage.searchHistory = JSON.stringify(this.searchHistory)
      })
    },
    
    showAlbum(id) {
      this.$router.push({
        name: 'album',
        params: { id }
      })
    },
    showSinger(id) {
      this.$router.push({
        name: 'singer',
        params: { id }
      })
    },
    openmv(vid) {
      window.open(`https://y.qq.com/portal/mv/v/${vid}.html`)
    },
    play(index) {
      this.$store.commit('setPlayList', {
        index,
        list: this.searchRes.song.itemlist
      })
      this.$store.commit('play')
    }
  },
  created() {
    if(localStorage.searchHistory) {
      this.searchHistory = JSON.parse(localStorage.searchHistory)
    }

    this.$store.dispatch('getHotkey').then(res => {
      this.hotkeys = res.data.data.hotkey.slice(0,5)
    })
  }
}
</script>

<style lang="less" scoped> 
  .search_container {
    #search {
      width: 100%;
      max-width: 68vh;
      height: 60px;
      background: #fff;
      position: fixed;
      top: 40px;
      display: flex;
      align-items: center;
      z-index: 1;
      .search_input {
        width: 100%;
        background: #eee;
        border-radius: 5px;
        margin: 10px;
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          margin: 0 5px;
          display: inline-block;
        }
        form, input {
          width: 100%; 
          height: 40px;
          margin: 0;
          padding: 0;
          border: 0;
          border-radius: 5px;
          background: #eee;
          font-size: medium;
          flex: 1;
        }
      }
      .search_cancel {
        height: 40px;
        width: 0px;
        margin: 10px auto;
        line-height: 40px;
        overflow: hidden;
        transition: width .3s ease;
        cursor: pointer;
      }
      .search_cancel_show {
        width: 55px;
      }
    }
    .hotkey {
      margin-top: 60px;
      margin-bottom: 50px;
      background: #fff;
      display: flex;
      flex-direction: column;
      .search_history {
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        max-height: 66px;
        .item {
          border: 1px solid #000;
          border-radius: 14px;
          padding: 0 3px;
          margin: 5px;
          cursor: pointer;
        }
      }
      ul {
        list-style: none;
        li {
          height: 40px;
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          .hotkey_k {
            flex: 1;
            margin-left: 10px;
          }
        }
      }
    }
    .result {
      margin-top: 60px;
      margin-bottom: 50px;
      display: flex;
      flex-direction: column;
      .group {
        background: #fff;
        .header {
          height: 40px;
          padding-left: 10px;
          padding-bottom: 5px;
          background: #eee;
          display: flex;
          align-items: flex-end;
          img {
            width: 25px;
            height: 25px;
          }
          .text {
            margin: 0;
            font-size: 16px;
            color: #000;
            margin-left: 10px;
          }
        }
        .song_item {
          height: 40px;
          margin-left: 10px;
          padding-left: 10px;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          .info {
            flex: 1;
            font-size: 16px;
            .name {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .author {
              color: #929292;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .action_button {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            img {
              width: 20px;
            }
          }
        }
        .album_item,
        .singer_item,
        .mv_item {
          height: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
          box-sizing: content-box;
        }
        .album_item {
          border-bottom: 1px solid #eee;
          padding: 10px;
          img {
            height: 40px;
            width: 40px;
            border-radius: 5px;
          }
          .info {
            display: flex;
            flex-direction: column;
            padding-left: 15px;
            .name {
              font-size: 14px;
              line-height: 20px;
            }
            .author {
              font-size: 12px;
              color: #929292;
              line-height: 20px;
            }
          }
        }
        .singer_item {
          padding: 5px 10px;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          p {
            font-size: 16px;
            color: #000;
            margin: 0;
            padding: 3px 10px;
            height: 40px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            flex: 1;
          }
        }
        .mv_item {
          border-bottom: 1px solid #eee;
          padding: 10px;
          .info {
            display: flex;
            flex-direction: column;
            .name {
              font-size: 14px;
              line-height: 20px;
            }
            .author {
              font-size: 12px;
              color: #929292;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
</style>
